<template>
  <el-dialog @close="close" title="新增员工" :visible.sync="showDialog">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="姓名" :label-width="formLabelWidth" prop="username">
        <el-input v-model="form.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机" :label-width="formLabelWidth" prop="mobile">
        <el-input v-model="form.mobile" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="入职时间"
        :label-width="formLabelWidth"
        prop="timeOfEntry"
      >
        <el-date-picker
          v-model="form.timeOfEntry"
          type="date"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="聘用形式"
        :label-width="formLabelWidth"
        prop="formOfEmployment"
      >
        <el-select
          @blur="$refs.form.validateField('formOfEmployment')"
          v-model="form.formOfEmployment"
          placeholder="请选择活动区域"
        >
          <el-option
            v-for="item in formOfEmploymentList"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="工号"
        :label-width="formLabelWidth"
        prop="workNumber"
      >
        <el-input v-model="form.workNumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="部门"
        :label-width="formLabelWidth"
        prop="departmentName"
      >
        <el-input
          readonly
          @focus="handleFocus"
          @blur="handleBlur"
          v-model="form.departmentName"
          autocomplete="off"
        ></el-input>
        <el-tree
          class="deptTree"
          v-if="treeShow"
          @node-click="handleNodeClick"
          :data="treeData"
          :expand-on-click-node="false"
          default-expand-all
          :props="defaultProps"
        ></el-tree>
      </el-form-item>
      <el-form-item
        label="转正时间"
        :label-width="formLabelWidth"
        prop="correctionTime"
      >
        <el-date-picker
          v-model="form.correctionTime"
          type="date"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 导入枚举库
import enumObj from '@/utils/constant/employees'
// 导入接口
import { deptListAPI } from '@/api/department'
import { addEmp } from '@/api/employees'
// 导入递归工具
import { arrayToTree } from '@/utils'
export default {
  data () {
    return {
      showDialog: false,
      form: {
        // 记住要先声明属性才可以去用，就能保证肯定不容易出bug
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        correctionTime: ''
      },
      formLabelWidth: '80px',
      // 聘用形式的数组
      formOfEmploymentList: enumObj.hireType,
      treeData: [],
      defaultProps: {
        // 设置找哪个属性作为子节点
        children: 'children',
        // 设置找哪个属性为文字显示
        label: 'name'
      },
      treeShow: false,
      rules: {
        username: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        formOfEmployment: [
          { required: true, message: '请选择聘用形式', trigger: 'change' }
        ],
        workNumber: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '请选择部门', trigger: 'blur' }
        ],
        timeOfEntry: [
          { required: true, message: '请输入入职时间', trigger: 'blur' }
        ],
        correctionTime: [
          { required: true, message: '请输入转正时间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 当对话框关闭时调用
    close () {
      // 重置表单
      this.$refs.form.resetFields()
    },
    // 点击确定的点击事件
    async save () {

      try {
        // 对整个表单进行校验
        await this.$refs.form.validate()
        // 发请求做新增
        await addEmp(this.form)
        // 弹出成功提示
        this.$message.success('新增员工成功')
        // 隐藏对话框
        this.showDialog = false
        // 刷新父组件的数据
        // 把页码跳转到最后一页，我们需要自己算出来最后一页是第几页，然后把页码变成最后一页再
        // 加载数据才有用
        // 一共9条数据，一页显示10条，请问一共多少页？ 1页   9 / 10 = 0.9 向上取整变为 1
        // 一共10条数据，一页显示10条，请问一共多少页？ 1页  10 / 10 = 1 向上取整为1
        // 一共 13条数据 一页显示10条，请问一共多少页？ 2页  13 / 10 = 1.3 向上取整为2
        // 总页数 = 总数量 / 每页多少条 再向上取整 
        // 算出总页数就是其实最后一页的页码
        // 新增后总数量应该+1
        this.$parent.total++
        this.$parent.page = Math.ceil(this.$parent.total / this.$parent.size)
        this.$parent.loadData() // 只是刷新当前页，因为当前页已经是最后一页了，所以刷新即可
      } catch {}
    },
    // 部门的获得焦点方法
    async handleFocus () {
      // 显示tree
      this.treeShow = true
      // 发请求获得所有部门
      const res = await deptListAPI()
      // 把拿到的部门列表转成树形结构，赋值给treeData就能给tree显示了
      this.treeData = arrayToTree(res.data.depts, '')
    },
    // 部门的失去焦点方法
    handleBlur (e) {
      // 去的如果不是tree，则隐藏tree
      if (
        e.relatedTarget == null ||
        !e.relatedTarget.classList.contains('el-tree-node')
      ) {
        this.treeShow = false
      }
    },

    handleNodeClick (data) {
      // 拿到被点的节点名字，赋值给文本框
      this.form.departmentName = data.name

      // 赋值完了就隐藏tree
      this.treeShow = false

      // 手动把校验结果清除掉
      this.$refs.form.clearValidate('departmentName')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-tree-node__expand-icon {
    display: none !important;
  }
}
</style>
